<template>
	<view class="login-home">
		<cu-navbar :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">
				<!-- #ifdef MP-WEIXIN -->
				绑定手机号码
				<!-- #endif -->
				<!-- #ifdef H5 || APP-PLUS -->
				手机验证码登录
				<!-- #endif -->
			</block>
		</cu-navbar>
		<view class="bg-white" style="height: 100%;position: relative;">
			<view class="padding">
				<view class="text-center padding">
					<view class="cu-avatar xl radius">
						<!-- #ifdef MP-WEIXIN -->
						<open-data type="userAvatarUrl" style="border-radius: 50%;overflow: hidden;" class="cu-avatar xl round"></open-data>
						<!-- #endif -->
						<!-- #ifdef H5 || MP-TOUTIAO || APP-PLUS -->
						<image :src="logo" mode="" style="height: 100%;width: 100%;"></image>
						<!-- #endif -->
					</view>
				</view>
				<view class="cu-form-group margin-top">
					<view class="title"></view>
					<input placeholder="输入手机号码" v-model="mobile" />
				</view>
				<view class="cu-form-group">
					<view class="title"></view>
					<input placeholder="输入验证码" v-model="captcha" />
					<button class="cu-btn bg-mauve shadow" @click="checking" v-if="state === false">获取验证码</button>
					<button class="cu-btn bg-mauve shadow" v-if="state === true">倒计时{{ currentTime }}s</button>
				</view>
				<view class="flex margin-top-xl padding-top-xl">
					<button class="flex-sub cu-btn bg-gradual-pink round lg block shadow" @click="submit">登录</button>
					<!-- #ifdef MP-WEIXIN -->
					<button
						class="flex-sub cu-btn bg-green round lg block shadow text-sm margin-left-xs"
						open-type="getPhoneNumber"
						@getphonenumber="getphonenumber"
					>
						微信授权手机登录
					</button>
					<!-- #endif -->
				</view>
			</view>
			<!-- #ifdef H5 -->
			<view class="third flex justify-center" v-if="isWechat">
				<image class="wechat" @click="goAuth" src="../../static/wechat.png" mode="aspectFit"></image>
			</view>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
export default {
	computed: {
		logo() {
			return this.vuex_config.logo || '';
		},
		isWechat() {
			return this.$common.isWeiXinBrowser();
		}
	},
	onLoad(e) {
		this.wx_user_id = e.wx_user_id || 0;
		this.auth = e.auth || '';
	},
	data() {
		return {
			auth: '',
			wx_user_id: 0,
			mobile: '',
			captcha: '',
			state: false, //是否开启倒计时
			totalTime: 60, //总时间，单位秒
			recordingTime: 0, //记录时间变量
			currentTime: 0 //显示时间变量
		};
	},
	methods: {
		checking() {
			//把显示时间设为总时间
			this.currentTime = this.totalTime;
			this.smsSend(res => {
				if (res.code == 1) {
					//开始倒计时
					this.state = true;
					//执行倒计时
					this.checkingTime();
				}
			});
		},
		checkingTime() {
			let that = this;
			//判断是否开启
			if (this.state) {
				//判断显示时间是否已到0，判断记录时间是否已到总时间
				if (this.currentTime > 0 && this.recordingTime <= this.totalTime) {
					//记录时间增加 1
					this.recordingTime = this.recordingTime + 1;
					//显示时间，用总时间 - 记录时间
					this.currentTime = this.totalTime - this.recordingTime;
					//1秒钟后，再次执行本方法
					setTimeout(() => {
						//定时器内，this指向外部，找不到vue的方法，所以，需要用that变量。
						that.checkingTime();
					}, 1000);
				} else {
					//时间已完成，还原相关变量
					this.state = false; //关闭倒计时
					this.recordingTime = 0; //记录时间为0
					this.currentTime = this.totalTime; //显示时间为总时间
				}
			} else {
				//倒计时未开启，初始化默认变量
				this.state = false;
				this.recordingTime = 0;
				this.currentTime = this.totalTime;
			}
		},
		// #ifdef H5
		goAuth() {
			let url = '';
			if (window.location.hash != '') {
				url = window.location.origin + window.location.pathname + '?hashpath=/pages/auth/auth';
			} else {
				url = window.location.origin + '/pages/auth/auth';
			}
			this.$api.mpAuth({ url }).then(res => {
				if (res.code == 1) {
					window.location.href = res.data;
				}
			});
		},
		// #endif
		smsSend(callBack) {
			if (!this.$common.isPhoneNumber(this.mobile)) {
				this.$common.errorToShow('手机号码格式错误！');
				return;
			}
			this.$api
				.smsSend({
					mobile: this.mobile,
					event: 'mobilelogin'
				})
				.then(res => {
					callBack(res);
					this.$common.errorToShow(res.msg);
				});
		},
		// #ifdef MP-WEIXIN
		getphonenumber(e) {
			if (e.detail.errMsg == 'getPhoneNumber:ok') {
				this.$api
					.getWechatMobile({
						encryptedData: e.detail.encryptedData,
						iv: e.detail.iv,
						wx_user_id: this.wx_user_id
					})
					.then(res => {
						if (res.code == 1) {
							this.$vuex('vuex_user', res.data.userinfo);
							setTimeout(() => {
								uni.navigateBack({
									delta: 2
								});
							}, 1500);
						}
					});
			} else {
				this.$common.errorToShow(e.detail.errMsg);
			}
		},
		// #endif
		submit() {
			if (!this.$common.isPhoneNumber(this.mobile)) {
				this.$common.errorToShow('手机号码格式错误！');
				return;
			}
			if (this.captcha == '') {
				this.$common.errorToShow('请输入验证码！');
				return;
			}
			this.$api
				.mobilelogin({
					mobile: this.mobile,
					captcha: this.captcha,
					wx_user_id: this.wx_user_id
				})
				.then(res => {
					this.$common.errorToShow(res.msg);
					if (res.code == 1) {
						this.$vuex('vuex_user', res.data.userinfo);						
						if (this.auth == 'auth') {
							uni.switchTab({ url: this.$ph.member });
						} else {
							setTimeout(() => {
								uni.navigateBack({
									delta: 2
								});
							}, 1500);
						}
					}
				});
		}
	}
};
</script>

<style>
page {
	height: 100vh;
	background-color: #f4f6f8;
}
</style>
<style lang="scss" scoped>

.login-home {
	height: 100%;
	display: flex;
	flex-direction: column;
}
// #ifdef H5
.third {
	position: absolute;
	bottom: 10%;
	width: 100%;
	.wechat {
		width: 80rpx;
		height: 80rpx;
	}
}
// #endif
</style>
